<template>
  <div class="houseList">
    <div class="wrapper">
      <div class="search">
        <div class="add" @tap="addClick">
          <div class="addBtn">
            <text>添加</text>
          </div>
          <viex class="icon">
            <div class="iconfont icon-jia"></div>
          </viex>
        </div>
        <div class="write">
          <i-icon
            class="icon"
            color="rgb(106, 106, 106)"
            size="20"
            type="search" />
          <input
            v-model="searchValue"
            left
            class="input"
            placeholder-style="color: rgb(197, 197, 197);"
            type="text"
            placeholder="搜索房号" />
        </div>
      </div>

      <div class="filters">
        <div class="list">

          <div class="detail">
            <picker
              mode="selector"
              :value="typeIndex"
              :range="typeList"
              @change="typeChange">
              <div class="index-filters-picker">
                {{typeValue}}
              </div>
            </picker>
          </div>

          <div class="detail">
            <picker
              mode="selector"
              :value="moneyIndex"
              :range="moneyList"
              @change="moneyChange">
              <div class="index-filters-picker">
                {{moneyValue}}
              </div>
            </picker>
          </div>

        </div>
      </div>

      <div class="list">
        <div
          v-for="(item, index) in houseListFilter"
          :key="item.id"
          class="detail">
          <i-swipeout
            :operateWidth="item.rentStatus === '已租' ? 240 : 120"
            :unclosable="false"
            :toggle="false">
            <div class="houseList-swipeout" slot="content" @tap="detailClick(item)">
              <div class="info">
                <div class="title">{{item.roomNo}}</div>
                <div class="local">{{item.roomAddress}}</div>
                <div class="desc">
                  <span class="status" :class="{
                    yes: item.rentStatus === '已租',
                    no: item.rentStatus === '未租',
                    remind: item.rentStatus === '提醒'
                  }">{{item.rentStatus}}</span>
                  <span class="price">¥ {{item.rentMoney}}</span>
                </div>
              </div>
              <div class="remind">

              </div>
            </div>
            <div
              slot="button"
              class="detail-btn">
              <div
                v-if="item.rentStatus !== '已租'"
                class="btn"
                @tap="detailRegister(item)">登记</div>
              <div
                v-if="item.rentStatus === '已租'"
                class="btn"
                @tap="detailReadMeter(item)">抄表</div>
              <div
                v-if="item.rentStatus === '已租'"
                class="btn"
                @tap="detailCheckout(item)">退房</div>
              <div
                v-if="item.rentStatus === '已租'"
                class="btn"
                @tap="detailSend(item)">发送密码</div>
              <div
                class="btn"
                @tap="detailDelete(item)">删除</div>
            </div>
          </i-swipeout>
        </div>
      </div>

      <div class="loadingMore">
        <i-load-more v-if="isLoadingMore" />
        <div
          v-if="isNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>

      <i-action-sheet
        show-cancel
        :mask-closable="false"
        :visible="actionVisible"
        :actions="actionDetail"
        @cancel="actionCancel"
        @sure="actionSure">
        <div slot="header" style="padding: 16px">
          <div style="color: #444;font-size: 16px">确定吗？</div>
          <text v-show="actionType === 'delete'">删除后无法恢复哦</text>
          <text v-show="actionType === 'send'">将会通过微信发送门锁密码</text>
        </div>
      </i-action-sheet>

      <i-message id="message" />

    </div>
  </div>
</template>

<script>
import { $Message } from '../../../static/iview/base/index'
import { mapGetters, mapMutations } from 'vuex'
import { ERR_OK, pageSize } from 'api/config'
import { getList, delList, sendList } from 'api/houseList'
import { roleKeys, indexTypeList, indexMoneyList } from 'common/js/modules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin('/page/home/main', '吉屋管家')],
  computed: {
    houseListFilter () {
      let arr = []
      if (this.searchValue) {
        arr = this.houseList.filter(item => item.roomNo.indexOf(this.searchValue) > -1)
      } else {
        arr = this.houseList
      }

      if (this.typeIndex !== '0') {
        arr = this.houseList.filter(item => item.rentStatus === this.typeList[this.typeIndex])
      }

      if (this.moneyIndex === '0') {
        return arr
      } else if (this.moneyIndex === '1') {
        arr = arr.filter(item => item.rentMoney < 500)
      } else if (this.moneyIndex === this.moneyList.length - 1 + '') {
        arr = arr.filter(item => item.rentMoney > 4500)
      } else {
        const range = this.moneyList[this.moneyIndex].split(' - ')

        arr = arr.filter(item => item.rentMoney >= range[0] && item.rentMoney <= range[1])
      }

      return arr
    },
    ...mapGetters([
      'Roles'
    ])
  },
  onShow () {
    this.page = 1
    this.getList('init', true)
  },
  onPullDownRefresh () {
    this.page = 1
    this.getList('init', false)
  },
  onReachBottom () {
    this.getMoreList()
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      searchValue: '',
      typeIndex: '0',
      typeValue: '状态',
      moneyIndex: '0',
      moneyValue: '租金范围',
      typeList: indexTypeList(),
      moneyList: indexMoneyList(),
      page: 1,
      houseList: [],
      isLoadingMore: false,
      isNoMoreData: false,
      actionType: 'delete',
      actionVisible: false,
      actionDetail: [
        {
          name: '删除',
          color: '#ed3f14',
          loading: false
        }
      ]
    }
  },
  methods: {
    initData () {
      this.searchValue = ''
      this.typeIndex = '0'
      this.typeValue = '状态'
      this.moneyIndex = '0'
      this.moneyValue = '租金范围'
      this.houseList = []
      this.isNoMoreData = false
    },
    actionSure (detail) {
      if (this.actionDetail[0].loading) {
        return
      }

      if (this.actionType === 'delete') {
        this.delList(this.deleteId)
      } else {
        this.sendList(this.deleteId)
      }
    },
    actionCancel () {
      if (this.actionDetail[0].loading) {
        return
      }
      this.actionVisible = false
    },
    addClick () {
      if (!this.Roles[roleKeys.addHouseList]) {
        this.$showToast({
          title: '您没有添加权限',
          icon: 'none'
        })
        return
      }
      this.SET_ACTIONKEY('add')
      wx.navigateTo({
        url: '/pages/houseDetail/main'
      })
    },
    detailClick (item) {
      let key = 'edit'
      if (!this.Roles[roleKeys.editHouseList]) {
        key = 'read'
      }
      this.SET_CURRENTITEM(item)
      this.SET_ACTIONKEY(key)
      wx.navigateTo({
        url: '/pages/houseDetail/main'
      })
    },
    detailDelete ({ id }) {
      if (!this.Roles[roleKeys.delHouseList]) {
        this.$showToast({
          title: '您没有删除权限',
          icon: 'none'
        })
        return
      }

      this.actionType = 'delete'
      this.actionDetail[0].name = '删除'
      this.actionVisible = true
      this.deleteId = id
    },
    detailCheckout (item) {
      if (!this.Roles[roleKeys.checkout]) {
        this.$showToast({
          title: '您没有退房权限',
          icon: 'none'
        })
        return
      }
      this.SET_CHECKOUTKEY('addEdit')
      this.SET_CHECKOUT(item)
      wx.navigateTo({
        url: '/pages/checkoutDetail/main'
      })
    },
    detailReadMeter (item) {
      if (!this.Roles[roleKeys.readMeter]) {
        this.$showToast({
          title: '您没有抄表权限',
          icon: 'none'
        })
        return
      }

      this.SET_READMETER(item)
      wx.navigateTo({
        url: '/pages/readMeterDetail/main'
      })
    },
    detailRegister (item) {
      if (!this.Roles[roleKeys.checkInHouseList]) {
        this.$showToast({
          title: '您没有登记权限',
          icon: 'none'
        })
        return
      }
      this.SET_REGISTERKEY('addEdit')
      this.SET_REGISTER(item)
      wx.navigateTo({
        url: '/pages/contractDetail/main'
      })
    },
    detailSend ({ id }) {
      if (!this.Roles[roleKeys.wxSendPwdHouseList]) {
        this.$showToast({
          title: '您没有发送密码权限',
          icon: 'none'
        })
        return
      }

      this.actionType = 'send'
      this.actionDetail[0].name = '发送'
      this.actionVisible = true
      this.deleteId = id
    },
    typeChange (e) {
      const { value } = e.target
      this.typeIndex = value
      const typeValue = value === '0' ? '状态' : this.typeList[value]
      this.typeValue = typeValue
    },
    moneyChange (e) {
      const { value } = e.target
      this.moneyIndex = value
      const moneyValue = value === '0' ? '租金范围' : this.moneyList[value]
      this.moneyValue = moneyValue
    },
    getMoreList () {
      if (this.isNoMoreData) {
        return
      }
      this.isLoadingMore = true
      this.page += 1
      this.getList('more', false)
    },
    async delList (id) {
      this.actionDetail[0].loading = true

      const res = await delList(id)

      this.actionDetail[0].loading = false
      this.actionCancel()

      if (res.code === ERR_OK) {
        const deleteIndex = this.houseList.findIndex(item => item.id === id)
        this.houseList.splice(deleteIndex, 1)
        $Message({
          content: '删除成功',
          type: 'success'
        })
      } else {
        $Message({
          content: '删除失败',
          type: 'error'
        })
      }
    },
    async sendList (id) {
      this.actionDetail[0].loading = true

      const res = await sendList(id)

      this.actionDetail[0].loading = false
      this.actionCancel()

      if (res.code === ERR_OK) {
        $Message({
          content: '发送成功',
          type: 'success'
        })
      } else {
        $Message({
          content: '发送失败',
          type: 'error'
        })
      }
    },
    async getList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.$showLoading('加载中')
      }

      const res = await getList(this.page)

      if (isShowLoading) {
        wx.hideLoading()
      } else {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init') {
          this.houseList = res.rows
          this.isNoMoreData = false
          this.isLoadingMore = false
        } else if (type === 'more') {
          this.houseList = [...this.houseList, ...res.rows]
          this.isLoadingMore = false
        }

        if (res.rows.length < pageSize) {
          this.isNoMoreData = true
        }
      }
    },
    ...mapMutations({
      SET_CURRENTITEM: 'houseDetail/SET_CURRENTITEM',
      SET_ACTIONKEY: 'houseDetail/SET_ACTIONKEY',
      SET_REGISTER: 'contractDetail/SET_CURRENTITEM',
      SET_REGISTERKEY: 'contractDetail/SET_ACTIONKEY',
      SET_CHECKOUT: 'checkoutDetail/SET_CURRENTITEM',
      SET_CHECKOUTKEY: 'checkoutDetail/SET_ACTIONKEY',
      SET_READMETER: 'readMeterDetail/SET_CURRENTITEM'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .houseList {
    width: 100%;
    height: 100%;
    position: relative;
    > .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      > .search {
        width: 100%;
        height: 58px;
        display: flex;
        border: 1px solid rgb(229, 229, 229);
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        > .add {
          width: 90px;
          line-height: 56px;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          box-sizing: border-box;
          > .addBtn {
            max-width: e("calc(100% - 20px)");
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > .icon {
            width: 20px;
            margin-left: 2px;
          }
        }
        > .write {
          flex: 1;
          position: relative;
          > .icon {
            width: 20px;
            line-height: 56px;
            position: absolute;
            left: 9px;
            top: 0;
          }
          > .input {
            width: 97%;
            height: 36px;
            margin-top: 10px;
            padding-left: 34px;
            background-color: rgb(241, 241, 241);
            border-radius: 16px;
            font-size: 14px;
            box-sizing: border-box;
          }
        }
      }
      > .filters {
        width: 100%;
        // height: 32px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(238, 238, 238);
        box-sizing: border-box;
        > .list {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;
          display: flex;
          padding: 5px 0;
          > .detail {
            flex: 1;
            border-right: 1px solid rgb(238, 238, 238);
            font-size: 16px;
            text-align: center;
            padding: 5px;
            overflow: hidden;
            &:nth-last-of-type(1) {
              border-right: none;
            }
            > picker {
              width: 100%;
              .index-filters-picker {
                width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
      }
      > .list {
        width: 100%;
        > .detail {
          .houseList-swipeout {
            > .info {
              color: black;
              > .title {
                font-size: 16px;
              }
              > .local {
                margin: 2px 0;
              }
              > .desc {
                > .status {
                  margin-right: 5px;
                  color: $color-default;
                  &.yes {
                    color: $color-success;
                  }
                  &.no {
                    color: $color-error;
                  }
                  &.remind {
                    color: $color-warning;
                  }
                }
              }
            }
          }
          .detail-btn {
            height: 100%;
            display: flex;
            > .btn {
              flex: 1;
              height: 100%;
              background-color: $color-default;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
      > .add {
        position: fixed;
        right: 20px;
        bottom: 40px;
      }
    }
  }
</style>
